<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="check()">换一换</button>
    <button onclick="check1()">不见了</button>
    <button onclick="check2()">出来</button>
    <div id="box">888</div>
    <img src="imgs/1.png" alt="失败" title="风景画" width="100px" height="70px">

    <input type="checkbox">请选择
    <button onclick="test()">演示设置属性获取属性</button>

    <hr>
</body>

</html>

<script>
    function check() {
        //获取图片对象
        var img = document.querySelector("img");
        //操作属性：  对象.属性：获取属性值  || 对象.属性="值":设置属性值
        //alert(img.src);
        //img.title  img.width
        img.src = "imgs/2.png";

        document.querySelector("#box").style.color = "green";

        //复选框的选中值为true 反之false
        document.querySelector("input").checked = !document.querySelector("input").checked;
    }


    function check1() {
        //获取图片对象
        var img = document.querySelector("img");
        img.style.display = "none";

    }
    function check2() {
        //获取图片对象
        var img = document.querySelector("img");
        img.style.display = "block";
    }


    //我们还可以通过方法来获取或设置属性值
    function test() {
        //获取属性
        // alert(img.getAttribute("src"));
        //获取图片对象
        var img = document.querySelector("img");
        //alert(img.getAttribute("src"));//和img.src的区别是 一个全路径 一个就只是属性值
        img.setAttribute("src","imgs/2.png");

    }


</script>